<template>
    <div class="content-box">
        <div class="container">
            <div id="building">
                <div>
                    <input
                        type="text"
                        name="text"
                        placeholder="请输入股票代码"
                        v-model="kw"
                        @keydown.enter="
                            get_stockinfo();
                            geturl();
                        "
                    />
                    <div class="container-sm ">
                        <div class="stock-name">{{ stockname }}</div>
                        <div class="stock-id">股票代码：{{ stockid }}</div>
                        <div class="clearfix"></div>
                        <div class="quote-container">
                            <div class="stock-info">
                                <div class="stock-price ">
                                    <div v-if="choosecolor(stockprice) == 'red'">
                                        <div class="stock-current">价格:</div>
                                        <div class="stock-current red">{{ stockprice }}</div>
                                    </div>
                                    <div v-else>
                                        <div class="stock-current">价格:</div>
                                        <div class="stock-current green">{{ stockprice }}</div>
                                    </div>
                                    <div class="stock-change">{{ zhangdiefudu }} {{ zhangdiebili }}</div>
                                </div>
                               
                                <el-row style="padding-left:400px">
                                    <el-button type="primary" @click="submitForm()">添加到收藏夹</el-button>
                                </el-row>
                        
                                <div class="stock-time">
                                    <div class="quote-market-status">
                                        <span>{{ dealingstatus }}</span
                                        ><br /><span>{{ nowTime }} </span>
                                    </div>
                                </div>
                            </div>

                            <p class="xiangxishuju">详细数据</p>
                            <table class="quote-info">
                                <tbody>
                                    <tr>
                                        <td>
                                            最高：<span :style="cc(zuigao)">{{ zuigao }}</span>
                                        </td>
                                        <td>
                                            今开：<span :style="cc(jinkai)">{{ jinkai }}</span>
                                        </td>
                                        <td>
                                            涨停：<span :style="cc(zhangting)">{{ zhangting }}</span>
                                        </td>
                                        <td>
                                            成交量：<span>{{ chengjiaoliang }}</span>
                                        </td>
                                    </tr>
                                    <tr class="separateTop">
                                        <td>
                                            最低：<span :style="cc(zuidi)">{{ zuidi }}</span>
                                        </td>
                                        <td>
                                            昨收：<span
                                                ><strong>{{ zuoshou }}</strong></span
                                            >
                                        </td>
                                        <td>
                                            跌停：<span :style="cc(dieting)">{{ dieting }}</span>
                                        </td>
                                        <td>
                                            成交额：<span>{{ chengjiaoe }}</span>
                                        </td>
                                    </tr>
                                    <tr class="separateBottom">
                                        <td>
                                            量比：<span class="stock-rise">{{ liangbi }}</span>
                                        </td>
                                        <td>
                                            换手：<span>{{ huanshou }}</span>
                                        </td>
                                        <td>
                                            市盈率(动)：<span>{{ shiyinglvdong }}</span>
                                        </td>
                                        <td>
                                            市盈率(TTM)：<span>{{ shiyinglvttm }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            每股净资产：<span>{{ meigujinzichan }}</span>
                                        </td>
                                        <td>
                                            振幅：<span>{{ zhengfu }}</span>
                                        </td>
                                        <td>
                                            市盈率(静)：<span>{{ shiyinglvjing }}</span>
                                        </td>
                                        <td>
                                            市净率：<span>{{ shijinglv }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            每股收益：<span>{{ meigushouyi }}</span>
                                        </td>
                                        <td>
                                            股息(TTM)：<span>{{ guxi }}</span>
                                        </td>
                                        <td>
                                            总股本：<span>{{ zongguben }}</span>
                                        </td>
                                        <td>
                                            总市值：<span>{{ zongshizhi }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            股息率(TTM)：<span>{{ guxilv }}</span>
                                        </td>
                                        <td>
                                            流通股：<span>{{ liutonggu }}</span>
                                        </td>
                                        <td>
                                            流通值：<span>{{ liutongzhi }}</span>
                                        </td>
                                        <td>货币单位：<span>CNY</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in carouseData" :key="item">
                    <img :src="item.url" alt="" />
                </el-carousel-item>
            </el-carousel> -->
            <div class="pic">
                <div class="ppp">
                    <span>分时K线图</span>
                    <img :src="geturl(stockid)" target="_blank" />
                </div>
                <div class="ppp">
                    <span>日K线图</span>
                    <img :src="geturl2(stockid)" target="_blank" />
                </div>
                <div class="ppp">
                    <span>周K线图</span>
                    <img :src="geturl3(stockid)" target="_blank" />
                    <!-- <img :src="geturl3(newstockid)" target="_blank" /> -->
                </div>
                <div class="ppp">
                    <span>月K线图</span>
                    <img :src="geturl4(stockid)" target="_blank" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            stockname: '没你好果汁吃',
            stockid: '114514',
            stockprice: '0.00',
            zhangdiefudu: '0.00',
            zhangdiebili: '0.00%',
            dealingstatus: '交易结束',
            nowTime: '',
            colorcurrent: 'choosecolor(stockprice)',
            zuigao: '0.00',
            jinkai: '0.00',
            zhangting: '0.00',
            chengjiaoliang: '0.00万手',
            zuidi: '0.00',
            zuoshou: '0.00',
            dieting: '0.00',
            chengjiaoe: '0.00亿',
            liangbi: '0.00',
            huanshou: '0.00%',
            shiyinglvdong: '0.00',
            shiyinglvttm: '0.00',
            zhengfu: '0.00%',
            shiyinglvjing: '0.00',
            shijinglv: '0.00',
            meigushouyi: '0.00',
            guxi: '0.00',
            zongguben: '0.00亿',
            zongshizhi: '0.00亿',
            meigujinzichan: '0.00',
            guxilv: '0.00%',
            liutonggu: '0.00亿',
            liutongzhi: '0.00亿',
            kw: ''
            // carouseData: [
            //     { url: require('http://image.sinajs.cn/newchart/min/n/sh000001.gif') },
            //     { url: require('http://image.sinajs.cn/newchart/daily/n/sh000001.gif') },
            //     { url: require('http://image.sinajs.cn/newchart/weekly/n/sh000001.gif') },
            //     { url: require('http://image.sinajs.cn/newchart/monthly/n/sh000001.gif') }
            // ]
        };
    },
    mounted() {
        this.nowTimes();
    },
    beforeDestroy() {
        this.clear();
    },
    methods: {
        geturl(img) {
            var url = 'http://image.sinajs.cn/newchart/min/n/' + img + '.gif';
            return url;
        },
        geturl2(img) {
            var url = 'http://image.sinajs.cn/newchart/daily/n/' + img + '.gif';
            return url;
        },
        geturl3(img) {
            var url = 'http://image.sinajs.cn/newchart/weekly/n/' + img + '.gif';
            return url;
        },
        geturl4(img) {
            var url = 'http://image.sinajs.cn/newchart/monthly/n/' + img + '.gif';
            return url;
        },
        //传输数据到后端
        get_stockinfo: function(event) {
            let config = {
                // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };
            let data = { stockcode: this.kw };
            // axios方式发送请求
            this.$axios
                .post('http://127.0.0.1:8000/api/stockinfo/', data, config)
                .then(response => {
                    console.log(response.data);
                    if (response.data.error_code == '1') {
                        // alert('get response');
                        this.stockid = response.data.type;
                        this.stockname = response.data.stockname;
                        this.stockprice = response.data.stockprice;
                        this.zhangdiefudu = response.data.price_change;
                        this.zhangdiebili = response.data.percentage;
                        this.zuigao = response.data.high;
                        this.jinkai = response.data.today;
                        this.zhangting = response.data.highest;
                        this.chengjiaoliang = response.data.volume;
                        this.zuidi = response.data.low;
                        this.zuoshou = response.data.yesterday;
                        this.dieting = response.data.lowest;
                        this.chengjiaoe = response.data.volume_price;
                        this.liangbi = response.data.liangbi;
                        this.huanshou = response.data.huanshou;
                        this.shiyinglvdong = response.data.shiyinglvdong;
                        this.shiyinglvjing = response.data.shiyinglvjing;
                        this.shiyinglvttm = response.data.shiyinglvttm;
                        this.shijinglv = response.data.shijinglv;
                        this.meigujinzichan = response.data.meigujinzichan;
                        this.meigushouyi = response.data.meigushouyi;
                        this.guxi = response.data.guxi;
                        this.zongguben = response.data.zongguben;
                        this.zongshizhi = response.data.zongshizhi;
                        this.meigujinzichan = response.data.meigujinzichan;
                        this.guxilv = response.data.guxilv;
                        this.liutongu = response.data.liutonggu;
                        this.liutongzhi = response.data.liutongzhi;
                        this.zhenfu = response.data.zhenfu;
                    } else {
                        alert('fail to retrive data');
                    }
                })
                .catch(function(error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        cc(color) {
            if (color > this.zuoshou) return 'color:red';
            else return 'color:green';
        },
        choosecolor(currentcolor) {
            if (currentcolor > this.zuoshou) return 'red';
            else return 'green';
        },
        timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month =
                new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
            let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
            let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
            let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
            let ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
            this.nowTime =
                year +
                '.' +
                month +
                '.' +
                date +
                '  ' +
                '星期' +
                '日一二三四五六'.charAt(new Date().getDay()) +
                ' ' +
                hh +
                ':' +
                mm +
                ':' +
                ss;
        },
        nowTimes() {
            this.timeFormate(new Date());
            setInterval(this.nowTimes, 1000);
            this.clear();
        },
        clear() {
            clearInterval(this.nowTimes);
            this.nowTimes = null;
        },

        //传输数据到后端
        submitForm() {
            let config = {
                 // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
                 headers: {
                     //'Content-Type': 'application/json'  //默认是这个
                     // 'Content-Type': 'multipart/form-data'
                     'Content-Type': 'application/x-www-form-urlencoded'
                 }
            };
            let data = { stock_id: this.stockid};

            // axios方式发送请求
            this.$axios
                .post('http://127.0.0.1:8000/api/add_collection/',data,config)
                .then(response => {
                    console.log(response.data);
                    this.tableData = response.data;
                    if (response.data.code == 1) {
                         alert('add successfully!');
                    } else {
                         alert('oops!');
                    }
                })
                .catch(function(error) {
                    // 请求失败处理
                    console.log(error);
                });
        }
    }
};
</script>

<style scoped>
.building {
    /* background:url("../assets/bj.jpg") no-repeat; */
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
    top: 0;
    border-width: 0 0 1px;
}

.stock-name {
    line-height: 28px;
    font-size: 35px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
    font-family: PingFangSC-Semibold;
}

.stock-id {
    margin-top: 20px;
    line-height: 28px;
    font-size: 20px;
    color: darkslategrey;
    text-align: center;
    margin-bottom: 5px;
    font-family: PingFangSC-Semibold;
}

.container-sm {
    padding-top: 30px;
}

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.stock-info {
    overflow: hidden;
    zoom: 1;
}

.stock-price {
    overflow: hidden;
    zoom: 1;
    text-align: center;
}

.stock-current {
    font-size: 30px;
    line-height: 40px;
    display: inline;
}

.stock-change {
    padding-top: 5px;
    margin-left: 8px;
    margin-right: 10px;
    font-size: 20px;
}

.stock-time {
    text-align: center;
    margin-top: 1px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, serif;
    font-weight: 400;
    color: #909499;
    line-height: 14px;
}

.quote-market-status {
    padding-top: 2px;
    padding-bottom: 4px;
}

.quote-info {
    color: #33353c;
    margin-top: 5px;
    width: 100%;
    font-size: 20px;
}

.xiangxishuju {
    color: cornflowerblue;
    font-size: 25px;
}

.red {
    color: red;
}

.green {
    color: green;
}
.btns {
    display: flex;
    justify-content: flex-end;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.pic {
    margin-top: 30px;
    height: 400px;
    width: 100%;
}

.ppp {
    height: 250px;
    width: 50%;
    float: left;
}

.ppp img {
    height: 200px;
    width: 100%;
    float: left;
}

.ppp span {
    height: 50px;
    font-size: large;
}
</style>
